<script setup>
import { ref } from 'vue';
import FanInput from '..';

const aaaa = ref('');
const value = ref('');
const onConfirm = (e) => {
  console.log(value.value);
};
</script>

<template>
  <demo-block title="基础用法">
    <FanInput
      v-model="value"
      placeholder="请输入文本"
      border
      style="background: #fff"
      @change="onConfirm"
    ></FanInput>
    <FanInput
      style="background: #fff"
      label="文本"
      placeholder="请输入文本"
    ></FanInput>
  </demo-block>

  <demo-block title="图标">
    <FanInput
      style="background: #fff"
      placeholder="请输入文本"
      prefix-icon="search"
    ></FanInput>
  </demo-block>

  <demo-block title="图标一起">
    <FanInput
      disabled
      style="background: #fff"
      placeholder="请输入文本"
      prefix-icon="search"
      label="搜索"
    ></FanInput>
  </demo-block>

  <demo-block title="清除">
    <FanInput
      style="background: #fff"
      placeholder="请输入文本"
      v-model="aaaa"
      prefix-icon="search"
      clearable
    ></FanInput>
  </demo-block>
</template>
